// 引入defineStore
import { defineStore } from 'pinia'
import { nanoid } from 'nanoid'
import axios from 'axios'
import { reactive } from 'vue'

// // 分别暴露，使用的对象写法
// export const useLoveTalkStore = defineStore('loveTalk', {
//   // 其中actions里面放置的是一个一个方法，用于响应组件中的“动作”
//   actions: {
//     async getATalk() {
//       // 发请求：下面这行的写法是，连续结构赋值+重命名
//       let {
//         data: { hitokoto: title },
//       } = await axios.get('https://v1.hitokoto.cn/?c=f&encode=json')
//       // 把请求回来的字符串，包装成一个对象
//       let obj = {
//         id: nanoid(),
//         // title: title,
//         title,
//       }
//       this.talkList.push(obj)
//     },
//   },
//   // 真正存储数据的地方
//   state() {
//     return {
//       // 其中as string是断言，但是如果没有数据的话，就使用空数组
//       talkList: JSON.parse(localStorage.getItem('talk') as string) || [],
//     }
//
//     // return {
//     //   talkList: [
//     //     {
//     //       id: nanoid(),
//     //       title: '今天你有点怪，哪里怪？怪好看的！',
//     //     },
//     //     {
//     //       id: nanoid(),
//     //       title: '草莓、蓝莓、蔓越莓，今天想我了没?',
//     //     },
//     //     {
//     //       id: nanoid(),
//     //       title: '心里给你留了一块地，我的死心塌地！',
//     //     },
//     //   ],
//     // }
//   },
// })

// 分别暴露，使用的是函数写法
export const useLoveTalkStore = defineStore('loveTalk', () => {
  // 真正存储数据的地方，其中talkList就相当于state
  let talkList = reactive(JSON.parse(localStorage.getItem('talk') as string) || [])

  // getATalk函数相当于action
  async function getATalk() {
    // 发请求：下面这行的写法是，连续结构赋值+重命名
    let {
      data: { hitokoto: title },
    } = await axios.get('https://v1.hitokoto.cn/?c=f&encode=json')
    // 把请求回来的字符串，包装成一个对象
    let obj = {
      id: nanoid(),
      // title: title,
      title,
    }
    talkList.push(obj)
  }

  return {
    getATalk,
    talkList,
  }
})
